<template>
  <div>
    <div style="margin-bottom:10px;line-height:26px;" v-if="tagShow">
      <template v-if="showCheckbox">
        <Tag>已选：</Tag>
        <template v-if="selectedNodes.length">
          <Poptip placement="right-start" transfer trigger="hover" :word-wrap="true" :width="400">
            <Tag :color="tagColor"><span style="font-size:16px;font-weight:bolder;">{{
                selectedNodes.length
              }}</span>
              个节点
            </Tag>
            <div slot="content">
              <span v-for="item in selectedNodes" :key="item.nodeKey">{{ item.title }} </span>
            </div>
          </Poptip>
        </template>
        <template v-else>
          <Tag :color="tagColor"><span style="font-size:16px;font-weight:bolder;">{{
              selectedNodes.length
            }}</span> 个节点
          </Tag>
        </template>
      </template>
      <template v-else>
        <template v-if="!value.length">
          <Tag>已选：</Tag>
          <Tag color="warning">无</Tag>
        </template>
        <template v-else>
          <Tag>已选：</Tag>
          <Tag v-for="item in selectedNodes" :key="item.nodeKey" :name="item.nodeKey" closable
               @on-close="handleClose(item)"
               :color="tagColor">
            {{ item.title }}
          </Tag>
        </template>
      </template>
    </div>
    <div>
      <Tree ref="tree" :data="data" :check-strictly="checkStrictly" :check-directly="checkDirectly" :multiple="multiple"
            :show-checkbox="showCheckbox"
            @on-select-change="handleSelectChange" @on-check-change="handleCheckChange">
        >
      </Tree>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
  components: {},
})
export default class TreeSelectCommon extends AbpBase {
  name: string = 'TreeSelectCommon';
  @Prop({type: Array, default: () => []}) value: any[];
  @Prop({type: Array, default: () => []}) data: any[];
  @Prop({type: Boolean, default: false}) tagShow: boolean;
  @Prop({type: String, default: 'warning'}) tagColor: string;
  @Prop({type: Boolean, default: false}) multiple: boolean;
  @Prop({type: Boolean, default: false}) checkStrictly: boolean;
  @Prop({type: Boolean, default: false}) checkDirectly: boolean;
  @Prop({type: Boolean, default: false}) showCheckbox: boolean;
  @Prop({type: String, default: ''}) property: string;
  @Prop({type: Boolean, default: false}) indeterminate: boolean;

  selectedNodes: any[] = [];


  handleClose(node: any) {
    const index = this.selectedNodes.findIndex(item => {
      return item.name === node.name;
    });
    this.selectedNodes.splice(index, 1);
    this.setSelectedNode(this.data, this.selectedNodes.map(item => {
      return item[this.property];
    }));
    if (this.indeterminate) {
      this.$emit('input', (this.$refs.tree as any).getCheckedAndIndeterminateNodes());
    } else {
      this.$emit('input', (this.$refs.tree as any).getCheckedNodes());
    }
  }

  handleSelectChange(currentNodeArray) {

    if (!this.showCheckbox) {
      this.selectedNodes = currentNodeArray;
      this.$emit('input', currentNodeArray);
    }
  }

  handleCheckChange(currentNodeArray) {
    if (this.showCheckbox) {

      if (this.indeterminate) {
        this.selectedNodes = (this.$refs.tree as any).getCheckedAndIndeterminateNodes();
        this.$emit('input', (this.$refs.tree as any).getCheckedAndIndeterminateNodes());
      } else {
        this.selectedNodes = (this.$refs.tree as any).getCheckedNodes();
        this.$emit('input', (this.$refs.tree as any).getCheckedNodes());
      }
    }
  }


  setSelectedNode(data: any[], selectedNodeProperties: any) {
    const nodes: any[] = [];
    for (const node of data) {
      if (this.showCheckbox) {

        this.$set(node, 'checked', false);
        this.$set(node, 'indeterminate', false);
      } else {
        this.$set(node, 'selected', false);
      }

      for (const name of selectedNodeProperties) {
        if (name === (node as any)[this.property]) {
          if (this.showCheckbox) {
            this.$nextTick(()=>{
              if (node.children.length > 0) {
                this.$set(node, 'indeterminate', true);
                this.$set(node, 'checked', false);
              } else {
                this.$set(node, 'indeterminate', false);
                this.$set(node, 'checked', true);
              }
              (this.$refs.tree as any).$emit('on-check-change', nodes, node);
            });
          } else {
            (this.$refs.tree as any).$emit('on-selected-change', nodes, node);
            (this.$refs.tree as any).$emit('on-selected', node.nodeKey);
          }
          break;
        }
      }
      if ((node as any).children) {
        this.setSelectedNode((node as any).children, selectedNodeProperties);
      }
    }
  }


}
</script>

<style lang="less" scoped>

</style>
